<template>
  <view class="query_container">
    <view class="query_box">
      <van-field
        :value="queryparam.title"
        placeholder="点击搜索您想找的商品名称"
        input-class="input"
        @blur="inputchange"
      />
      <view class="query_btn_box">
        <van-dropdown-menu active-color="#FE3772">
          <van-dropdown-item
            :value="queryparam.goods_status"
            :options="option1"
            @change="status_change"
          />
        </van-dropdown-menu>
        <van-button custom-class="reset_btn" @tap="reset">重置</van-button>
        <van-button custom-class="query_btn" @tap="thequery">查询</van-button>
      </view>
    </view>

    <!-- 商品展示区域 -->
    <scroll-view
      :scroll-y="true"
      class="scroll-y"
      @scrolltolower="scroll_bottom"
    >
      <good-info-near
        :goodsList="goodList"
        :type="type"
        @set_goods="set_goods"
        @set_tg="set_tg"
        :timestamp="timestamp"
        v-if="goodList.length > 0"
      ></good-info-near>
      <view class="no_order" v-if="goodList.length == 0">
        <image src="/static/index/no_good.png" mode="" style="width:200rpx;height:200rpx"/>
        <view>暂无相关宝贝</view>
      </view>
    </scroll-view>

    <!-- <van-empty description="描述文字" /> -->

    <!-- 商品展示区域 -->

    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" zIndex="99999999999" />
    <van-action-sheet
      z-index="10"
      :show="mode_show"
      :actions="actions"
      description="选择套餐模式"
      @click-overlay="mode_show = false"
      @select="choose_mode"
      @close="close_mode"
    />
  </view>
</template>

<script>
import GoodInfoNear from "../components/good_info_near";
import Dialog from "../../wxcomponents/vant/dialog/dialog";
import {
  query_all_goods,
  set_mchnear_goods,
  set_tj_goods,
} from "../../utils/imapi";
export default {
  props: {},
  components: {
    GoodInfoNear,
  },
  data() {
    return {
      value: "",
      option1: [
        { text: "全部", value: "" },
        { text: "仓库中", value: 0 },
        { text: "已上架", value: 1 },
        { text: "提审中", value: 2 },
        { text: "审核成功", value: 3 },
        { text: "审核失败", value: 4 },
      ],
      value1: 0,
      goodList: [],
      queryparam: {
        goods_status: "",
        page_index: 1,
        page_size: 4,
        title: "",
        load_spec: "1",
      },
      mode_show: false,
      actions: [
        { name: "套餐一:1天20元", className: "1" },
        { name: "套餐二:3天50元", className: "3" },
        { name: "套餐三:8天100元", className: "8" },
      ],
      good_info: {},
      from: "",
      timestamp:'',
      type:''
    };
  },
  computed: {},
  watch: {},
  onLoad(options) {
    console.log(options);
    if(options.type) {
        this.type=options.type
    }
    this.query_all_goods();
  },
  onReady() {},
  onShow() {},
  methods: {
    async query_all_goods() {
      this.queryparam.page_index = 1;
      const timestamp = Date.parse(new Date()).toString()
      try {
        const data = await query_all_goods(this.queryparam);
        console.log(data);
        if (data.code == 0) {
          this.timestamp=timestamp
          this.goodList = data.data
        }
      } catch (error) {}
    },
    reload() {
      this.queryparam.page_index = 1;
      this.query_all_goods();
    },
    status_change(e) {
      console.log(e.detail);
      this.queryparam.goods_status = e.detail;
       this.query_all_goods();
      console.log(this.queryparam.goods_status);
    },
    inputchange(e) {
      console.log(e.detail);
      this.queryparam.title = e.detail.value;
    },
    reset() {
      this.queryparam = {
        goods_status: "",
        page_index: 1,
        page_size: 10,
        title: "",
        load_spec: "1",
      };
      this.query_all_goods();
    },
    thequery() {
      console.log(this.queryparam.title);
      this.query_all_goods();
    },

    async scroll_bottom() {
      console.log("触底了");
      this.queryparam.page_index++;
      try {
        const data = await query_all_goods(this.queryparam);
        const toast = this.$toast.loading("加载中");
        if (data.code == 0) {
          this.goodList.push(...data.data);
          console.log(data);
          toast.clear();
          if (data.data.length == 0) {
            this.queryparam.page_index--;

            this.$toast("全部加载");
          }
        }
      } catch (error) {}
    },
    set_goods(e) {
      const that = this;
      console.log(e.goods.id);
      const id = e.goods.id;
      Dialog.confirm({
        message: "确定要设置曝光此商品?",
      })
        .then(async () => {
          // on confirm
          try {
            const data = await set_mchnear_goods({
              goods_id: id,
            });
            console.log(data);
            if (data.code == 0) {
              that.$toast("设置成功");
              if (this.from == "out") {
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1000);
              }
            }
          } catch (error) {
            console.log(error);
            that.$toast("请稍后重试");
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    set_tg(e) {
      const that = this;
      console.log(e.goods.id);
      const id = e.goods.id;
      this.good_info = e.goods;
      this.mode_show = true;
    },
    choose_mode(e) {
      const that = this;
      console.log(e);
      const mode = Number(e.detail.className);
      Dialog.confirm({
        message: "确定要购买此套餐?",
      })
        .then(async () => {
            uni.showLoading({
                title: '购买中...'
            });
          // on confirm
          try {
            const data = await set_tj_goods({
              goods_id: that.good_info.id,
              day_mode: mode,
            });
            console.log(data);
            if (data.code == 0) {
              that.$toast("购买成功");
              uni.hideLoading();
              this.mode_show = false;
            }else {
                that.$toast(data.msg);
                uni.hideLoading();
              this.mode_show = false;
            }
          } catch (error) {
            console.log(error);
            // that.$toast("请稍后重试");
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    close_mode() {},
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.query_container {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  .query_box {
    width: 750upx;
    height: 220upx;
    background: #FE3772;
    padding: 32upx;
    /deep/ .van-cell {
      height: 68upx;
      background: #ffffff;
      border-radius: 38upx;
      display: flex;
      align-items: center;
      overflow: hidden;

      .input {
        // height: 100%;
        font-size: 24upx;
      }
    }
    .query_btn_box {
      margin-top: 20upx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /deep/ .van-dropdown-menu {
        width: 320upx;
        height: 68upx;
        background: #ffffff;
        border-radius: 34upx;
      }
      /deep/ .reset_btn {
        width: 168upx;
        height: 68upx;
        background: #FE3772;
        border-radius: 34upx;
        border: 2upx solid #fff;
        text-align: center;
        line-height: 68upx;
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
      }
      /deep/ .query_btn {
        width: 168upx;
        height: 68upx;
        background: #FE3772;
        border-radius: 34upx;
        text-align: center;
        line-height: 68upx;
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
        border: 2upx solid #fff;
      }
    }
  }
}
.scroll-y {
  flex: 1;
  position: relative;
  overflow-y: scroll;
}
.no_order {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
